<!--
 * @Descripttion:
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-05-28 08:35:45
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-04-14 14:48:23
-->
<template>
  <div class="login">
    <div class="login-logo">
      <a href="https://www.tongxingzhou.cn">
        <img src="@/assets/images/loginLogo.jpg" alt="" />
      </a>
    </div>
    <div class="login-all">
      <div class="login-propaganda">
        <img src="../assets/images/propaganda.jpg" alt="" />
      </div>

      <div class="login-content">
        <div v-if="register.registerShow">
          <div class="tab-title">
            <div
              class="tab-title-specific"
              @click="toggle"
              :class="active ? 'active' : ''"
            >
              密码登录
            </div>
            <div
              class="tab-title-specific"
              @click="toggle"
              :class="active ? '' : 'active'"
            >
              验证码登录
            </div>
          </div>
          <div class="loginForm" v-if="active">
            <el-form :model="loginForm" ref="loginForm" v-if="active" :rules="loginRules">
              <el-form-item style="width: 328Px" prop="username">
                <el-input
                  v-model="loginForm.username"
                  placeholder="手机号/账号"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                style="width: 328Px; margin-top: 32Px"
                prop="password"
              >
                <el-input
                  show-password
                  clearable
                  v-model="loginForm.password"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="verification" v-else>
            <el-form :model="phoneForm" ref="phoneForm" v-if="!active" :rules="loginRules">
              <el-form-item class="phoneItem" style="width: 328Px">
                <el-input v-model="phoneForm.mobile" placeholder="请输入手机号">
                </el-input>
              </el-form-item>
              <el-form-item style="width: 328Px; margin-top: 32Px" prop="code">
                <el-input
                  placeholder="验证码"
                  v-model="phoneForm.code"
                  prop="code"
                >
                  <el-button
                    type="text"
                    slot="suffix"
                    style="font-size:14Px;font-weight: 400;"
                    @click="getPhoneCode"
                    v-if="codeShow"
                  >
                    获取验证码
                  </el-button>
                  <div slot="suffix" v-else>{{ count }}</div>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="loginButtom">
            <el-button
              type="text"
              style="font-size: 14Px;font-weight: 400;"
              size="default"
              @click="freeRegister"
            >
              免费注册
            </el-button>
            <el-button
              type="text"
              style="color: #2b2b2b; font-size: 14Px;font-weight: 400;"
              size="default"
              @click="onForget"
              v-if="active"
            >
              忘记密码
            </el-button>
          </div>
          <div class="enterLogin">
            <el-button
              type="primary"
              style="width: 328Px; height: 43Px;font-size:16Px"
              @click="loginSubmit"
              >登录</el-button
            >
          </div>
        </div>
        <div class="login-forget" v-else>
          <forget-psd :register="register"></forget-psd>
        </div>
      </div>
    </div>
    <div class="login-bottom">
      <i></i>
      <span>同行舟 · 全国领先的一站式智能企业服务平台</span>
      <i></i>
    </div>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import ForgetPsd from "../components/login/forgetPsd.vue";
import RegisterAccount from "../components/login/registerAccount.vue";
import Cookies from "js-cookie";
import { getPhoneCode } from "@/api/login";
export default {
  components: {
    RegisterAccount,
    ForgetPsd,
    Vcode,
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  data() {
    return {
      isShow: false,
      codeValue: 86,
      phoneRules: {
        code: [
          { required: true, trigger: "change", message: "验证码不能为空" },
        ],
      },
      register: {
        registerShow: true,
      },
      phoneForm: {
        mobile: "",
        code: "",
        type: "2",
      },
      codeUrl: "",
      active: true,
      count: "",
      timer: null,
      codeShow: true,
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名/账号" },
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
      },
    };
  },
  created() {},
  methods: {
    // 免费注册
    freeRegister() {
      this.$router.push("/register");
    },
    // 滑块验证成功
    onSuccess(msg) {
      if (this.active) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username", this.loginForm.username, { expires: 30 });
              Cookies.set("password", encrypt(this.loginForm.password), {
                expires: 30,
              });
              Cookies.set("rememberMe", this.loginForm.rememberMe, {
                expires: 30,
              });
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove("rememberMe");
            }
            this.$store
              .dispatch("Login", this.loginForm)
              .then(() => {
                this.$router.push({ path: this.redirect || "/" });
              })
              .catch(() => {})
              .catch(() => {
                this.loading = false;
                if (this.captchaOnOff) {
                }
              });
          }
        });
      } else {
        this.$refs.phoneForm.validate((valid) => {
          if (valid) {
            this.$store
              .dispatch("codeLogin", this.phoneForm)
              .then(() => {
                this.$router.push({ path: this.redirect || "/" }).catch(() => {
                  this.$message.error("登录失败,请重新登录");
                });
              })
              .catch(() => {
                this.loading = false;
                if (this.captchaOnOff) {
                  this.$message.error("登录失败,请重新登录");
                }
              });
          }
        });
      }
      this.isShow = false; // 通过验证后，需要手动关闭模态框
    },
    // 关闭滑块验证
    onClose() {
      this.isShow = false;
    },
    // 登录
    loginSubmit() {
      if (this.active) {
        this.$refs.loginForm.validate((valid) => {
          if (!valid) return;
          this.isShow = true;
        });
      } else {
        this.$refs.phoneForm.validate((valid) => {
          if (!valid) return;
          this.isShow = true;
        });
      }
    },
    // 验证码登录
    codeSubmit() {
      
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("codeLogin", this.phoneForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {
                this.$message.error("登录失败,请重新登录");
              });
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.$message.error("登录失败,请重新登录");
              }
            });
        }
      });
    },
    // 获取手机验证码
    getPhoneCode() {
      let that = this;
      var Reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 正则验证
      if (Reg.test(that.phoneForm.mobile)) {
        const TIME_COUNT = 60;
        if (!this.timer) {
          that.count = TIME_COUNT;
          that.codeShow = false;
          that.timer = setInterval(() => {
            if (that.count > 0 && that.count <= TIME_COUNT) {
              that.count--;
            } else {
              that.codeShow = true;
              clearInterval(this.timer);
              that.timer = null;
            }
          }, 1000);
        }
        getPhoneCode({
          mobile: this.phoneForm.mobile,
        }).then((res) => {
          this.$message.success(res.msg);
        });
      } else {
        this.$message.error("请输入正确的手机号");
      }
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.loginSubmit();
      }
    },

    onSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {})
            .catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
              }
            });
        }
      });
    },
    onRegister() {},
    toggle() {
      if (this.active) {
        this.$refs.loginForm.clearValidate()
        this.active = false;
      } else {
        this.active = true;
        this.$refs.phoneForm.clearValidate()
      }
    },
    submit() {},
    onForget() {
      this.register.registerShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {
  width: 328Px;
  height: 40Px;
  color: #2b2b2b;
  &::placeholder {
    font-size: 14Px;
  }
}
.login {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/login.jpg") no-repeat;
  background-size: 100% 100%;
  background-color: #f5f6f9;
  .login-logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 210Px;
    height: 40Px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-all {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  .login-propaganda {
    margin-top: 7%;
    width: 640Px;
    height: 640Px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-content {
    margin-top: 11%;
    margin-left: 88Px;
    margin-right: 20Px;
    width: 410Px;
    height: 496Px;
    background: #ffffff;
    box-shadow: 0Px 2Px 14Px 0Px rgba(20, 114, 255, 0.1);
    border-radius: 8Px;
    padding-left: 41Px;
    padding-right: 41Px;
    padding-top: 70Px;
    .tab-title {
      font-size: 20Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      display: flex;
      height: 30Px;
      .tab-title-specific {
        color: #666;
        font-weight: 500;
        margin-right: 40Px;
        cursor: pointer;
      }
    }
    .loginForm {
      margin-top: 33Px;
    }
    .verification {
      margin-top: 33Px;
      /deep/ .intl-tel-input-container {
        height: 100%;
        line-height: 140%;
        .flag-list-box {
          background-color: #eee;
          .search-input {
            background-color: #fff;
          }
        }
      }
    }
  }
  .loginButtom {
    display: flex;
    justify-content: space-between;
    margin-top: 21Px;
  }
  .enterLogin {
    margin-top: 77Px;
  }
}
.phoneItem {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.active {
  color: #2b2b2b !important;
  border-bottom: 4Px solid #1267fa;
}
.login-bottom {
  position: absolute;
  bottom: 3%;
  left: 38%;
  color: #999;
  // font-weight: 500;
  i::after {
    content: "";
    display: inline-block;
    width: 40Px;
    height: 1Px;
    background-color: #999;
    margin: 0 20Px;
    margin-bottom: 4Px;
  }
}
</style>